<template>
  <div class="container">
    <div class="bingzhang">
      <img src="../assets/homepage/title.png" alt="" class="title" />
    </div>
    <div class="service">
      <div class="number" v-for="(item, index) in serviceList" :key="index">
        <img :src="item.pic" alt="" class="process" />
      </div>
    </div>
    <div class="lingyuan">
      <img
        src="../assets/homepage/linyuan.png"
        alt=""
        style="width: 310px; height: 54px"
      />
    </div>
    <div style="display: flex; justify-content: center">
      <div class="Classification">
        <div class="linyuan" v-for="(item, index) in ClassificationList" :key="index" @click="Cemeterydetails(item.id)">
          <img
            :src="imgurl + item.cover_image"
            alt=""
            class="ificationpic1"
          />
          <div class="lingyuantitle">{{item.title}}</div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center;padding-top:3%">
      <router-link to="cemetery">
        <el-button class="more" type="warning">查看更多</el-button>
      </router-link>  
      
    </div>
    <div class="product">
      <img
        src="../assets/homepage/chanpin.png"
        alt=""
        style="width: 310px; height: 54px"
      />
    </div>
    <div style="display: flex; justify-content: center">
      <div class="app">
        <div v-for="(item,index) in productList" :key="index" class="companyapp">
          <img :src="imgurl + item.image" alt="">
          <div class="apptitle">{{item.name}}</div>
          <div class="appcontent">{{item.description}}</div>
        </div>

      </div>

    </div>
    
    <div class="aboutus">
      <img src="../assets/articles.png" alt="" style="width: 310px; height: 54px"/>
    </div>

    <div style="display: flex; justify-content: center">
      <div class="Classification">
        <div class="linyuan" v-for="item in goodsList" :key="item.id">
          <img :src="imgurl+item.goods_image" alt="">
          <div class="lingyuantitle">{{item.goods_name}}</div>

        </div>

      </div>
     

    </div>
    


    <div class="aboutus">
      <img
        src="../assets/homepage/aboutas.png"
        alt=""
        style="width: 310px; height: 51px"
      />
    </div>
    <div class="company" :style="{backgroundImage:'url('+imgurl+aboutList.home_big_image+')'}">
      <img
        :src="imgurl+aboutList.home_small_image"
        alt=""
        style="width: 400px; height: 280px"
      />
      <div style="width: 560px; padding-left: 82px">
       <div v-html="aboutList.content"></div>
      </div>
    </div>
    <div class="aboutus">
      <img
        src="../assets/homepage/winwenti.png"
        alt=""
        style="width: 310px; height: 51px"
      />
    </div>
    <div class="real-time">
      <div class="qubie" v-for="item in JournalismList" :key="item.id" @click="goInfodetail(item.id)">
        <img :src="imgurl + item.cover_image" alt="" style="width: 272px; height: 192px" />
        <div class="realtitle" style="">{{ item.title }}</div>
        <div style="font-size: 14px;margin-top: 2%;">{{ item.createtime | dateFormat }}</div>
        <div style="color: #999999; font-size: 14px;margin-top: 2%;">{{ item.content }}</div>
      </div>
    </div>
    <div style="display: flex; justify-content: center; padding-top: 42px">
      <router-link to="info">
        <el-button class="more" type="warning">查看更多</el-button>
      </router-link>  
      
    </div>
    <div style="display: flex; justify-content: center; padding-top: 70px">
      <img
        src="../assets/homepage/lianxi.png"
        alt=""
        style="width: 310px; height: 51px"
      />
    </div>
    <Contactus />
  </div>
</template>


<script>
import Contactus from '../components/contact'
export default {
  name: "Home",
  components: {
    Contactus
  },
  data() {
    return {
      serviceList: [
        {
          index: 1,
          pic: require("../assets/homepage/zhidao.png"),
        },
        {
          index: 2,
          pic: require("../assets/homepage/qiatan.png"),
        },
        {
          index: 3,
          pic: require("../assets/homepage/cuanyi.png"),
        },
        {
          index: 4,
          pic: require("../assets/homepage/lingche.png"),
        },
        {
          index: 5,
          pic: require("../assets/homepage/gaobie.png"),
        },
        {
          index: 6,
          pic: require("../assets/homepage/huazhuang.png"),
        },
        {
          index: 7,
          pic: require("../assets/homepage/yiti.png"),
        },
        {
          index: 8,
          pic: require("../assets/homepage/huohua.png"),
        },
        {
          index: 9,
          pic: require("../assets/homepage/guhui.png"),
        },
      ],
      ClassificationList: [],
      JournalismList: [],
      productList: [],
      aboutList: [],
      goodsList: [],
      name: "",
      phone: "",
      address: "",
      textarea: "",
      imgurl: "https://www.gongminlingyuanwang.cn/",
    };
  },
  created() {
    this.getdataList();
  },

  methods: {
    // 获取主页数据列表
    async getdataList() {
      const { data: res } = await this.$axios.get("index/home");
      console.log(res);
      res.data.cemeteryArticle.data.splice(8); // 陵园列表
      this.ClassificationList = res.data.cemeteryArticle.data
      this.JournalismList = res.data.news.data // 新闻资讯列表
      this.productList = res.data.companyProducts
      this.aboutList = res.data.about
      this.goodsList = res.data.goods.data
    },
    // 去陵园详情
     Cemeterydetails(id) {
      this.$router.push({
        path: "/Cemeterydetails",
        query: {
          id: id,
        },
      });
    },
    // 去新闻详情
    goInfodetail(id){
       this.$router.push({
        path: "/infodetail",
        query: {
          id: id,
        },
      });

    }


   
  },
};
</script>

<style lang="scss">

.bingzhang {
  display: flex;
  justify-content: center;
  padding-top: 70px;
}
.bingzhang .title {
  width: 471px;
  height: 54px;
}
.service {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 45px;
  .process {
    width: 91px;
    height: 77px;
    margin-left: 47px;
  }
}

.lingyuan {
  display: flex;
  justify-content: center;
  padding-top: 100px;
}
.Classification {
  padding-top: 30px;
  // margin: 0 auto; 
  width: 1250px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
}
.Classification .linyuan {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 272px;
  height: 230px;
  margin-left: 37px;
  margin-top: 30px;
  border: 1px solid #EEEEEE;
  transition: transform .2s;
  .lingyuantitle {
    margin:  auto;
  }
}
.ificationpic {
  width: 272px;
  height: 192px;
  border: 1px solid black;
}
.ificationpic1 {
  width: 272px;
  height: 192px;
  
}
.linyuan:hover  {
		transform: scale(1.1);
	}
.more {
  width: 200px;
  height: 50px;
  background-color: #ee9f07;
  color: #FFFFFF;
  font-size: 16px;
}
.product {
  display: flex;
  justify-content: center;
  padding-top: 80px;
}


.cont {
  width: 250px;
}
.cont:nth-child(1) {
  padding-left: 30px;
}
.cont:nth-child(2) {
  padding-left: 40px;
}
.app {
  padding-top: 32px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  .companyapp {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    align-items: center;
    .apptitle {
      font-size: 20px;
      color: #333333;
      height: 100px;
      display: flex;
      align-items: center;
      // padding-top: 20px;
    }
    .appcontent {
      width: 300px;
      font-size: 14px;
      color: #999999;
    }
  }
  .companyapp:nth-child(2){
    padding-top: 40px;
  }
  .companyapp:nth-child(3){
    padding-top: 30px;
  }
}



.aboutus {
  display: flex;
  justify-content: center;
  padding-top: 68px;
}
.company {
  margin-top: 23px;
  height: 390px;
  width: 100%;
  // background-image: url("../assets/homepage/beijing.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #ffffff;
}
.real-time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 1%;
  cursor: pointer;
}
.qubie {
  width: 260px;
  height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  justify-content: flex-start;
  padding-left: 38px;
  .realtitle {
    font-size: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333333;
  }
}
.MessageBoard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 2%;
  .input {
    width: 20%;
    margin-top: 1%;
  }
  .more {
    margin-top: 1%;
    width: 10%;
    font-size: 16px;
    background-color: #ee9f07;
  }
}
.footer {
  width: 100%;
  height: 200px;
  background-color: #212121;
  margin-top: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  .logo {
    width: 20%;
    margin: 0 auto;
  }
  .lianjie {
    display: flex;
    justify-content: center;
    color: #ffffff;
  }
  .gongsi {
    display: flex;
    justify-content: center;
    color: #ffffff;
  }
}


// @media (max-width:640px) {
//   .container {
//     width: 100%;
//   }
//   .bingzhang .title {
//     width: 100%;
//     // height: 54px;
//   }
//   .service {
//     // width: 100%;
//     display: flex;
//     flex-wrap: wrap;
    
//   }
// }
</style>

































.....................